<template>
	<view
		@click.stop="pageToScenicDetail(data.id)"
		class="ticket-card"
		:class="{ shadow: props.mode == 'map', paddingLeft: props.mode === 'map' }"
		:style="{
			width: props.width,
		}"
	>
		<!-- 左侧图片 -->
		<view class="card-image" :style="{ backgroundImage: `url(${data.cover_url})` }">
			<view class="mask">
				{{ openTime }}
			</view>
		</view>

		<!-- 右侧内容 -->
		<view class="card-content flex-col space-between">
			<view>
				<!-- 标题行 -->
				<view class="title-row flex-a mb-12">
					<view class="title text-ellipsis font-500 fs-32 pr-12">
						{{ data.name }}
					</view>
					<view class="level fs-20" v-if="data.quality_level > 0">
						{{ data.quality_level_name }}
					</view>
				</view>

				<!-- 口碑榜 -->
				<view class="mb-12" v-if="data.hot_list_id > 0">
					<koubei-rank
						:hot_list_id="data.hot_list_id"
						:hot_list_name="data.hot_list_name"
						:hot_list_ranking="data.hot_list_ranking"
					></koubei-rank>
				</view>

				<!-- 描述 -->
				<view class="c-grey-86 mb-12 text-ellipsis">{{ data.specialty }}</view>

				<!-- 评分行 -->
				<view class="score-row flex-a mb-12">
					<text class="score font-oppo">{{ scoreInCent(data.score_in_cent) }}</text>
					<text class="score-text">分</text>
					<text class="c-grey-86 mlr-8">·</text>
					<text class="c-grey-86">212条评论</text>
				</view>

				<!-- 标签组 -->
				<zjy-labels
					class="mb-12"
					:customClass="'no-wrap'"
					:data="data.sale_tips"
					v-if="data.sale_tips"
					:keyName="'title'"
				/>
			</view>

			<!-- 价格行 -->
			<view class="price-row">
				<text class="price-symbol fs-20">¥</text>
				<text class="price font-oppo ml-2">{{ formatAmount(data.lowest_price_in_cent) }}</text>
				<text class="ml-2">起</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import ZjyLabels from "@/components/zjy-labels.vue"
import KoubeiRank from "@/pages/hy/scenic/components/koubei-rank.vue"
import { scoreInCent } from "@/mixins/mixins"
import { formatAmount } from "@/utils/tools"
import { formatTime } from "@/mixins/mixins"
import { computed } from "vue"
import { pageToScenicDetail } from "@/utils/page-redirect"
const imgBaseUrl = inject("imgBaseUrl")

const props = defineProps({
	mode: {
		type: String,
		default: "list",
	},
	width: {
		type: String,
		default: "100%",
	},
	data: {
		type: Object as () => any,
		default: () => ({}),
	},
})

const openTime = computed(() => {
	/*if (props?.data.open_time === "00:00:00") {
		return ""
	}*/
	// today_opening true  opening false 今天会开园，还没开园
	if (props?.data.today_opening && !props?.data.opening) {
		return `${formatTime(props?.data.open_time)}开园`
	}
})
</script>

<style lang="scss" scoped>
.ticket-card {
	display: flex;
	background: #fff;
	border-radius: 12rpx;
	padding: 24rpx 0;

	&.shadow {
		backdrop-filter: blur(24px);
		box-shadow: 0 4rpx 16rpx 0 rgba(0, 0, 0, 0.1);
	}

	&.paddingLeft {
		padding-left: 16rpx;
	}

	.card-image {
		width: 224rpx;
		//height: 278rpx;
		border-radius: 12rpx;
		background-size: cover;
		background-position: center center;
		margin-right: 20rpx;
		position: relative;
		.mask {
			position: absolute;
			border-bottom-left-radius: 12rpx;
			border-bottom-right-radius: 12rpx;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 16rpx 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(360deg, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0) 100%);
			color: #fff;
			font-size: 22rpx;
			&:empty {
				display: none;
			}
		}
	}

	.card-content {
		position: relative;
		width: calc(100% - 244rpx);
		padding-bottom: 28rpx;
		border-bottom: 1px solid #e9eaee;

		.title-row {
			.title {
				color: #333;
			}

			.level {
				padding: 3rpx 8rpx;
				color: #4e5969;
				width: 42rpx;
				margin-top: 4rpx;
				background: #eef1f4;
				border-radius: 8rpx;
			}
		}

		.score-row {
			.score {
				color: $brown-7c;
				font-weight: 900;
				position: relative;

				&::after {
					content: "";
					display: block;
					width: 40rpx;
					height: 10rpx;
					position: absolute;
					left: 0;
					bottom: 2rpx;
					background: linear-gradient(90deg, rgba(219, 157, 15, 0.4) 0%, rgba(219, 157, 15, 0) 97%);
				}
			}

			.score-text {
				margin-left: 2rpx;
				color: $brown-7c;
			}
		}
		.price-row {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			color: #fe4f2f;

			.price {
				font-size: 32rpx;
				font-weight: 900;
				line-height: 42rpx;
			}
		}
	}
}
</style>
